<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ToDolist</title>
	</head>
	<style type="text/css">
		html, body, div, span, applet, object,button,iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    list-style: none;
    text-decoration: none;
}
		.toAdd{
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 50px 0;
		}
		.list{
			display: flex;
			justify-content: space-around;
		}
		.IwantTo,.IamOK{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.wantTo,.isOk{
			width: 360px;
			min-height: 460px;
			padding: 20px;
			border: 1px solid #42B983;
		}
		.wantTo ul,.isOk ul{
			display: flex;
			flex-direction: column;
		}
		.wantTo ul li,.isOk ul li{
			display: flex;
			align-items: center;
			border:1px solid #42B983;
			padding: 10px 5px;
			margin-bottom: 5px;
		}
		.isOk ul li{
			background: #42B983;
		}
		.select{
			display: flex;
			align-items: center;
			flex: 1;
		}
		.reMove{
			width: 20px;
			height: 20px;
			background: #d3d3d3;
			border-radius: 20px;
			font-size: 50px;
			line-height: 10px;
			text-align: center;
			cursor: pointer;
		}
	</style>
	<body style="min-width: 850px;">
		<div id="app">
		<div class="toAdd">
			<span>添加您的任务：</span>
			<input type="text" v-model="task.name" @keyup.enter='AddTask' /><!--焦点在input上，则键盘事件要绑定在input上-->
			<input type="button" value="添加"  @click='AddTask' />
		</div>
		<div class="list">
			<div class="IwantTo">
				<span class="doing">
					正在进行
				</span>
				<div class="wantTo">
				<ul>
					<list v-for="tasks in AllTask" :task = "tasks" v-if ="tasks.over=='false'"><!--这里v-if表示如果over属性是false时才显示--></list>
				</ul>
				</div>
			</div>
			<div class="IamOK">
				<span class="doing">
					已完成的任务
				</span>
				<div class="isOk">
				<ul>
					<list v-for="tasks in AllTask" :task = "tasks" v-if = "tasks.over=='true'"></list>
				</ul>
				</div>
			</div>
		</div>
	 </div>
	 <template id='tasklist'>
			<li>
				<div class="select">
					<input type="checkbox" :checked="checked"  @click='ChangeTask(index)' />
					<p>{{task.over}}</p>
				</div>
				<span class="reMove" @click='RemoveTask(index)'>-</span>
			</li> 	
	 </template>
	<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="js/vue-resource.js" type="text/javascript" charset="utf-8"></script> 用到异步加载json就需要这个-->
	<script src="js/listjson.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
